<template>
    <div class="be-new-actice-button">
        <Poptip v-for="(lItem, lIndex) in leftMenus" :key="'l' + lIndex" trigger="hover">
            <Button
                class="left-button"
                :class="{'active' : mainActive == lItem.module}"
            >{{ lItem.name }}</Button>
            <ul slot="content">
                <li
                    :class="{'active' : subAtive == lsItem.module}"
                    v-for="(lsItem, lsIndex) in lItem.children"
                    :key="lsIndex"
                    @click.stop="changeModule(lItem,lsItem)"
                >{{ lsItem.name }}</li>
            </ul>
        </Poptip>
        <Poptip v-for="(cItem, cIndex) in centerMenu" :key="'c' + cIndex" trigger="hover">
            <Button
                class="center-button"
                :class="{'active' : mainActive == cItem.module}"
            >{{ cItem.name }}</Button>
            <ul slot="content">
                <li
                    :class="{'active' : subAtive == csItem.module}"
                    v-for="(csItem, csIndex) in cItem.children"
                    :key="csIndex"
                    @click.stop="changeModule(cItem,csItem)"
                >{{ csItem.name }}</li>
            </ul>
        </Poptip>
        <Poptip v-for="(rItem, rIndex) in rightMenus" :key="'r' + rIndex" trigger="hover">
            <Button
                class="right-button"
                :class="{'active' : mainActive == rItem.module}"
            >{{ rItem.name }}</Button>
            <ul slot="content">
                <li
                    :class="{'active' : subAtive == rsItem.module}"
                    v-for="(rsItem, rsIndex) in rItem.children"
                    :key="rsIndex"
                    @click.stop="changeModule(rItem,rsItem)"
                >{{ rsItem.name }}</li>
            </ul>
        </Poptip>
    </div>
</template>

<script>
export default {
    name: 'Main-Menu',
    props: ['moduleConfig', 'defaultModule'],
    data() {
        return {
            mainActive: "",
            subAtive: "",
            leftMenus: this.moduleConfig.leftMenus,
            centerMenu: this.moduleConfig.centerMenu,
            rightMenus: this.moduleConfig.rightMenus,
        }
    },
    watch: {
        defaultModule(newValue, oldValue) {
            if (newValue) {
                var _default = newValue.split('-');
                this.changeModule({ module: _default[0] }, { module: _default[1] })
            }
        }
    },
    methods: {
        changeModule(mainData, subData) {
            var key = 'main-' + mainData.module + '-' + subData.module;
            if (subData.type != 'dialog') {
                this.mainActive = mainData.module;
                this.subAtive = subData.module;
            }
            this.$emit('changeModul', key, subData.type, subData.dialogTitle);
        }
    },
}
</script>

<style lang="less" scoped>
.be-new-actice-button {
    bottom: 0px;
    position: fixed;
    background: url(./M-BG.png) no-repeat;
    width: 912px;
    background-size: contain;
    text-align: center;
    height: 45px;
    padding-top: 17px;
    left: calc(50% - 456px);
    z-index: 1000;

    .left-button {
        background: url(./M-L.png) no-repeat;
        border: 0px;
        padding: 2px 34px;
        margin-right: -11px;
        color: #fff;
        background-size: contain;
        height: auto;
    }

    .left-button:hover {
        opacity: 0.9;
    }

    .center-button {
        background: url(./M-C.png) no-repeat;
        border: 0px;
        padding: 2px 41px;
        color: #fff;
        background-size: contain;
        height: auto;
    }

    .center-button:hover {
        opacity: 0.9;
    }

    .right-button {
        background: url(./M-R.png) no-repeat;
        border: 0px;
        padding: 2px 34px;
        margin-left: -11px;
        color: #fff;
        background-size: contain;
        height: auto;
    }

    .right-button:hover {
        opacity: 0.9;
    }

    /deep/.ivu-poptip-inner {
        background: none;
        box-shadow: none;
    }

    /deep/.ivu-poptip-popper[x-placement="top"] .ivu-poptip-arrow {
        display: none;
    }

    /deep/.ivu-poptip-popper {
        min-width: auto;
    }

    /deep/.ivu-poptip-content {
        .ivu-poptip-title {
            padding: 0px;
            border: 0px;
        }

        .ivu-poptip-body {
            background: none;
            padding: 0px;
        }

        .ivu-poptip-body-content {
            ul {
                text-align: center;

                li {
                    background: url(./M2-1.png) no-repeat;
                    background-size: contain;
                    text-align: center;
                    padding: 4px 28px;
                    color: rgba(255, 255, 255, 0.75);
                    cursor: pointer;
                    font-size: 12px;
                    margin-top: 1px;
                }

                li:hover {
                    opacity: 0.9;
                }

                .active {
                    background: url(./M2-2.png) no-repeat;
                    padding: 4px 28px;
                    background-size: contain !important;
                }
            }
        }
    }
}
</style>
